---
title: React Modal - Flowbite
description: Use the modal component to show an interactive dialog to your website users that overlays the main content based on multiple sizes, layouts, and styles
---

The modal component can be used to show any type of content such as text, form elements, and notifications to your website visitors by creating an off-canvas box on top of the main content area of your website.

You can choose from multiple examples based on various styles, layouts, and elements inside the modal component and you can customize the behaviour, placement, and sizing using our custom React props and the utility classes from Tailwind CSS.

To get started with the modal component you first need to import it from Flowbite React:

```jsx
import { Modal } from "flowbite-react";
```

## Default modal

Use the `<Modal>` React component to show a dialog element to the user with a header, body, and footer where you can add any type of content such as text or form elements.

The visibility of the component can be set by passing a boolean value to the `show` prop on the `<Modal>` component and we recommend you to do this via the React state.

Using a `openModal` and `setOpenModal` state for the main React component should allow you to easily manage the state of the Modal component and use inline functions on event listeners such as `onClick` or `onClose`.

<Example name="modal.root" />

## Backdrop dismissible

To enable the modal to be dismissed when clicking outside of the component (ie. the backdrop) then you can pass the `dismissible` prop to the `<Modal>` component from React.

<Example name="modal.dismissible" />

## Pop-up modal

Use this example by passing the `popup` prop from React to the modal component to show a dialog to the user asking for a decision such as when confirming an item deletion from the database.

<Example name="modal.popup" />

## Modal with form elements

You can also add form elements inside of the modal component by adding the markup that you want inside the `<ModalBody>` component. Form elements can be used to show user authentication or surveys modal elements.

<Example name="modal.withFormElements" />

## Initial focus

The `initialFocus` property in the `<Modal />` component sets the initial focus on a specific element when the modal opens, enhancing user experience by directing attention to key inputs such as those in authentication forms or surveys.

<Example name="modal.initialFocus" />

## Sizing options

To make the modal component smaller or larger you can pass the `size` prop to the `<Modal>` React component and you can choose from `sm`, `md`, `lg`, `xl` and all the way to `7xl`.

<Example name="modal.sizes" />

## Placement options

To set the position of the modal component relative to the page you can use the `position` prop on the modal component and you can choose from `center`, `top-left`, `top-center`, `bottom-right`, and more based on the selector options below.

<Example name="modal.position" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="modal" />

## References

- [Flowbite Modal](https://flowbite.com/docs/components/modal/)
